<script setup>
import { ref, onMounted } from 'vue'
 
const reds = []

// 跳转成绩页面
const goScore = () => {
  uni.navigateTo({
    url: '/pages/score/index'
  })
}

// 当前第几周
const nowWeek = ref(0)

// 获取当前周
const getNowWeek = () => {
  // 当前时间
  const now = new Date().getTime()
  // 开学时间
  const start = new Date('2023/12/25').getTime()
// 两者间的时间差
  const diff = now - start
  // 计算出当前是第几周
  const nowweek = Math.ceil(diff / (7 * 24 * 60 * 60 * 1000))
  console.log(nowweek);
  nowWeek.value = nowweek
}

// 当前周几
const nowWeekDay = ref(0)

// 获取当前周几
const getNowWeekDay = () => {
  const now = new Date()
  const day = now.getDay()
  nowWeekDay.value = day
}

// 每周日期
const weekDate = ['一', '二', '三', '四', '五', '六', '日']

// 初始化调
onMounted(() => {
  getNowWeek()
  getNowWeekDay()
  currentCourseList()
})

// 课程备用数据
const classListBackup = [
{
address: "",
category: "通识教育课/必修课",
color: "#602708",
computeHours: "0.0",
credit: "1.0",
lectureHours: "0.0",
method: "非统考",
name: "思想政治实践课1",
num: "U1300007",
rawSection: "二[9-10节]单",
rawWeeks: "1-18",
section: "9",
sectionCount: 2,
teachMethod: "讲授",
teacher: "猫猫老师",
totalHours: "16.0",
week: 2,
weeks: [1, 3, 5, 7, 9, 11, 13, 15, 17]
},
{
  address: "创新楼403",
category: "通识教育课/必修课",
color: "#FFA400",
computeHours: "0.0",
credit: "2.0",
lectureHours: "16.0",
method: "非统考",
name: "创新设计与创业基础",
num: "U0602406",
rawSection: "三[3-4节]",
rawWeeks: "1-6,8-19",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小熊老师",
totalHours: "32.0",
week: 3,
weeks: [1, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
},
{

address: "博士楼502",
category: "专业课/必修课",
color: "#FF3B56",
computeHours: "0.0",
credit: "3.0",
lectureHours: "54.0",
method: "统考",
name: "财务会计1",
num: "U0403008",
rawSection: "一[1-2节]",
rawWeeks: "1-10,12-17",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小明老师",
totalHours: "54.0",
week: 1,
weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17]
},
{
address: "博士楼502",
category: "专业课/必修课",
color: "#FF3B56",
computeHours: "0.0",
credit: "3.0",
lectureHours: "54.0",
method: "统考",
name: "财务会计1",
rawSection: "四[3-4节]单",
rawWeeks: "1-17,19",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小明老师",
totalHours: "54.0",
week: 4,
weeks: [1, 2, 3, 5, 7, 9, 11, 13, 15, 17, 19],
},
{
  address: "B站BV1go4y1M7Fa",
category: "专业课/必修课",
color: "#FF4900",
computeHours: "0.0",
credit: "2.0",
lectureHours: "34.0",
method: "统考",
name: "小程序开发从入门到放弃",
num: "U0402043",
rawSection: "四[5-8节]",
rawWeeks: "1-18",
section: 5,
sectionCount: 4,
teachMethod: "讲授",
teacher: "蛋白熙",
totalHours: "34.0",
week: 1,
weeks:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
},
{
address: "勤奋楼203",
category: "通识教育课/必修课",
color: "#6B669C",
computeHours: "0.0",
credit: "4.0",
lectureHours: "64.0",
method: "统考",
name: "大学英语A2",
rawSection: "五[1-2节]",
rawWeeks: "2-18",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小美",
totalHours: "64.0",
week: 5,
weeks:[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
},
{
  address: "田径场",
category: "通识教育课/必修课",
color: "#239C24",
computeHours: "0.0",
credit: "1.0",
lectureHours: "16.0",
method: "非统考",
name: "大学体育2",
num: "U0901002",
rawSection: "二[5-6节]",
rawWeeks: "1-18",
section: 5,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小帅",
totalHours: "16.0",
week: 2,
weeks:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
}
,{
  address: "宏远楼410",
category: "通识教育课/必修课",
color: "#EC2077",
computeHours: "0.0",
credit: "3.0",
lectureHours: "48.0",
method: "统考",
name: "高等数学A2",
num: "U0903011",
rawSection: "二[1-2节]",
rawWeeks: "1-6,8-9,11-17,19-20",
section: 1,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小新",
totalHours: "48.0",
week: 2,
weeks:  [1, 2, 3, 4, 5, 6, 8, 9, 11, 12, 13, 14, 15, 16, 17, 19, 20]
},
{
  address: "功德楼602",
category: "通识教育课/必修课",
color: "#EC2077",
computeHours: "0.0",
credit: "3.0",
lectureHours: "48.0",
method: "统考",
name: "高等数学A2",
rawSection: "五[5-6节]",
rawWeeks: "3-5,8-9",
section: 3,
sectionCount: 2,
teachMethod: "讲授",
teacher: "小新",
totalHours: "48.0",
week: 5,
weeks: [3, 4, 5, 8, 9],
},
{
  address: "梅勇楼401",
category: "通识教育课/必修课",
color: "#0AC0FF",
computeHours: "0.0",
credit: "2.0",
lectureHours: "32.0",
method: "非统考",
name: "中国近现代史纲要",
rawSection: "四[11节]单",
rawWeeks: "1-11",
section: 11,
sectionCount: 1,
teachMethod: "讲授",
teacher: "小玲",
totalHours: "32.0",
week: 4,
weeks: [1, 3, 5, 7, 9, 11]
}
]

// 当天课程
const todayCourseList = ref([])

// 过滤当天数据
const currentCourseList = () => {
  // 过滤本周数据
  const noweekData = classListBackup.filter(item => item.weeks.includes(nowWeek.value))
  // console.log(noweekData);
  // 过滤当天数据
  const dayData = noweekData.filter(item => item.week === nowWeekDay.value)
  console.log(dayData);
  todayCourseList.value = dayData.sort((a,b) => a.section - b.section)
}

// 跳转到课表页面
const goToSchedule = () => {
  uni.switchTab({
    url: '/pages/table/index'
  })
}

// 查看课程详情
const goDetail = (item) => {
  uni.navigateTo({
    url: '/pages/detail/index?item=' + JSON.stringify(item)
  })
}

// 日历对象
const calendar = ref(null)
// 打开日历
const openCalendar = () => {
  calendar.value.open()
}

// 跳转到考勤页面
const goToAttendance = () => {
  uni.switchTab({
    url: '/pages/my/index'
  })
}
</script>

<template>
  <view class="index1">
    <view class="top">
      <image
        src="../../static/images/login.png"
        mode="widthFix"
      />
    </view>
   <view class="category">
    <view class="item" @click="goToSchedule">
      <image
        src="../../static/images/index4.png"
        mode="widthFix"
      />
      <text>查课表</text>
    </view>
    <view class="item" @click="goScore">
      <image
        src="../../static/images/index1.png"
        mode="widthFix"
      />
      <text>查成绩</text>
    </view>
    <view class="item" @click="goToAttendance">
      <image
        src="../../static/images/index2.png"
        mode="widthFix"
      />
      <text>查考勤</text>
    </view>
    <view class="item" @click="openCalendar">
      <image
        src="../../static/images/index3.png"
        mode="widthFix"
      />
      <text>日历</text>
    </view>
   </view>
   <view class="container">
      <view class="title">
        <view class="left">今日课表</view>
        <view class="right">第{{nowWeek}}周 周{{ weekDate[nowWeekDay - 1] }}</view>
      </view>
      <div class="class">
        <div class="empty" v-if="!todayCourseList.length">
          <image
            src="../../static/images/empty.png"
            mode="widthFix"
          />
          <text>今天没有课程哟，快去充实一下自己吧！</text>
        </div>
        <view class="class-table" v-else>
          <view class="item" v-for="item in todayCourseList" @click="goDetail(item)">
            <text class="num">{{ item.rawSection.split("[")[1].replace("]","") }}</text>
            <text class="name">{{ item.name }}</text>
            <text>{{ item.address || "虚拟教室 "}}</text>
          </view>
        </view>
      </div>
   </view>
  </view>

  <uni-calendar 
  :lunar="true"
	ref="calendar"
	:insert="false"
	@confirm="confirm"
	 />
</template>



<style scoped lang="scss">
.index1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  .top  {
    margin-top: 94rpx;
    image {
      width: 344rpx;
    }
  }
  .category {
    width: 668rpx;
    height: 176rpx;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0px 0px 24px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 64rpx;
  .item {
    width: 90rpx;
    text-align: center;

    image {
      width: 90rpx;
      }
      text {
        font-family: 思源黑体;
        font-size: 18rpx;
        font-weight: normal;
        line-height: normal;
        text-align: center;
        letter-spacing: 0em;
      }
  }
  }
  .container {
    width: 668rpx;
    // height: 508rpx;
    padding-bottom: 30rpx;
    border-radius: 24rpx;
    opacity: 1;

    background: #FFFFFF;

    box-shadow: 0px 0px 24px -4px rgba(0, 0, 0, 0.1);
    margin-top: 34rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;
      padding: 0 34rpx;
      height: 40rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #F0F0F0;
      .left {
        font-family: SmileySans Oblique;
        font-size: 40rpx;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0em;

        color: #3E9C96;
      }
      .right {
                
        font-family: SmileySans Oblique;
        font-size: 24rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        font-style: italic;
        color: #666666;
      }
    }
    .empty {
      margin-top: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 40rpx;
      image {
        width: 356rpx;
      }
      text {
        font-family: 思源黑体;
        font-size: 20rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        margin-top:25rpx;
        color: #999999;
      }
    }
    .class-table {
      width: 90%;
      margin-top: 36rpx;
      margin-left: 32rpx;
      .item {
        height: 72rpx;
        border-bottom: 1rpx solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text {
          font-family: 思源黑体;
          font-size: 28rpx;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          font-style: italic;
          color: #666666;
          margin-right: 38rpx;
        }
        .num {
          font-family: 思源黑体;
          font-size: 28rpx;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          font-style: normal;
          color: #5DEFE5;
        }
        .name {
        flex: 1;
        font-style: normal;
        width: 160rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: 思源黑体;
        font-size: 28rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;

        color: #3D3D3D;
        }
      } 
    }
  }
}
.uni-tabbar_item-icon {
  width: 30px;
  height: 30px;
}
</style>
